<template>
    <div id='index'>
        <P></P>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="grid-content bg-purple" @click="menu('用户列表','/user/index')">
                    <div class="one">{{orderCount}}</div>
                    <div class="two">
                        <i class="el-icon-user"></i> 用户总数
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="grid-content bg-purple-light" @click="menu('商品管理','/product/index')">
                    <div class="one">{{productCount}}</div>
                    <div class="two">
                        <i class="el-icon-s-unfold"></i> 商品总数
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="grid-content bg-purple-dark" @click="menu('订单管理','/order/index')">
                    <div class="one">{{userCount}}</div>
                    <div class="two">
                        <i class="el-icon-s-claim"></i> 订单总数
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
    import {
        Row,
        Col
    } from 'element-ui'

    import {
        home
    } from '@/api/index'
    import P from './P.vue';
    export default {
        components: {
            'el-row': Row,
            'el-col': Col,
            P,
        },
        data() {
            return {
                orderCount: "",
                productCount: "",
                userCount: ""
            };
        },
        methods: {
            menu(menu, path) {
                console.log(1);
                sessionStorage.setItem('menu', menu)
                this.$router.push(`${path}`)
            },
            getlist() {
                home()
                    .then((res) => {
                        console.log(res)
                        const {
                            userCount,
                            productCount,
                            orderCount
                        } = res.data.data;
                        this.orderCount = orderCount;
                        this.productCount = productCount;
                        this.userCount = userCount
                    })
            }
        },
        mounted() {
            this.getlist()
        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #index {
        p {
            width: 100%;
            font-size: 40px;
            padding: 20px;
        }

        .el-col {
            border-radius: 4px;
            height: 160px;
        }

        .bg-purple-dark {
            background: #4cb1cf;
        }

        .bg-purple {
            background: #f0ad4e;
        }

        .bg-purple-light {
            background: #5cb85c;
        }

        & .grid-content {
            border-radius: 4px;
            min-height: 36px;
            width: 100%;
            height: 100%;
            opacity: .9;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transition: all .4s ease-out;

            .one {
                font-size: 50px;
            }

            .two {
                font-size: 20px;
            }
        }

        & .grid-content:hover {
            transform: scale(1.1);
            color: black;
        }
    }
</style>